<template>
  <div class="box">
    <van-nav-bar title="充值" left-arrow @click-left="onClickLeft" />
    <p style="margin: 12px">提现金额</p>
    <div class="currency-display">
      <!-- 货币符号 -->
      <span class="currency-symbol">￥</span>
      <!-- 输入框，绑定到currencyValue变量 -->
      <input type="number" class="currency-input" v-model.number="currencyValue" />
      <span style="margin: 25px 20px 0px 62px; font-size: 13px"
        >本次可获得<span style="color: red">300</span>H币</span
      >
    </div>
    <p style="font-size: 12px; color: #ccc; margin: 7px">最低充值1元，1元可兑换100H币。</p>
<div>  
      <h4>请选择充值方式</h4>  
      <van-cell-group inset>  
        <van-cell  
          v-for="(item) in list"  
          :key="item"  
          clickable  
          :title="`复选框 ${item}`"  
          :class="{'is-active': selected === item}"  
          @click="toggleSelection(item)"  
        >  
          <template #right-icon>  
            <van-checkbox  
              :checked="selected === item"  
              disabled  
              checked-color="red" 
              class="custom-checkbox"  
            />  
          </template>  
        </van-cell>  
      </van-cell-group>  
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const onClickLeft = () => history.back()
    const selected = ref(null) // 用来记录当前选中的充值方式
    const list = ['a', 'b'] // 充值方式列表
    const route = useRoute()  
    const totalHCoinsFromRoute = route.query.totalHCoins || 0 // 默认值为0  
    const toggleSelection = (item) => {
      if (selected.value === item) {
        selected.value = null // 如果已经选中，则取消选中
      } else {
        selected.value = item // 否则，选中当前项
      }
    }
    return {
      onClickLeft,
      list,
      selected,
      toggleSelection,
      totalHCoinsFromRoute
    }
  }
}
</script>
<style scoped>
.currency-display {
  width: 100%;
  display: flex; /* 使用Flexbox来对齐元素 */
  align-items: center; /* 垂直居中 */
  border-bottom: 1px solid #ccc;
}

.currency-symbol {
  margin-right: 8px; /* 在符号和输入框之间添加一些空间 */
  font-size: 50px; /* 根据需要调整字体大小 */
  color: black; /* 货币符号颜色 */
}

.currency-input {
  width: 100px;
  font-size: 40px;
  text-align: center; /* 文本居中 */
  border: none;
  color: #3087ea;
  /* background-color: #f2f2f2; */
}

</style>